<template>
    <div class="container">
        <div class="monitor">
            <div class="crawler_box" v-if="dataFlag">
                <div class="header_box">
                    <Tabs  v-model="tabActiveName"  @on-click="setTabClick">
                        <TabPane v-for="item in crawlerlist" :value="item.crawlerId" :key="item.crawlerId" :label="item.code" ></TabPane>
                    </Tabs>
                </div>
                <div class="bottom-box">
                    <div class="left">
                        <div class="img"></div>
                        <div class="db" v-if="!getJSON(dbObj)&&dbObj.fvsDevice" @click="getFvs(dbObj,1)">
                            <img src="../../../assets/images/fse/common/camera_0.png" v-if="dbObj.fvsDevice.deviceStatus == 0" class="disabled" />
                            <img src="../../../assets/images/fse/common/camera_1.png" v-if="dbObj.fvsDevice.deviceStatus == 1" />
                        </div>
                        <div class="qs" v-if="!getJSON(qsObj)&&qsObj.fvsDevice" @click="getFvs(qsObj,2)">
                            <img src="../../../assets/images/fse/common/camera_0.png" v-if="qsObj.fvsDevice.deviceStatus == 0" class="disabled" />
                            <img src="../../../assets/images/fse/common/camera_1.png" v-if="qsObj.fvsDevice.deviceStatus == 1" />
                        </div>
                        <div class="hs" v-if="!getJSON(hsObj)&&hsObj.fvsDevice" @click="getFvs(hsObj,3)">
                            <img src="../../../assets/images/fse/common/camera_0.png" v-if="hsObj.fvsDevice.deviceStatus == 0" class="disabled" />
                            <img src="../../../assets/images/fse/common/camera_1.png" v-if="hsObj.fvsDevice.deviceStatus == 1" />
                        </div>
                        <div class="jy" v-if="!getJSON(jyObj)&&jyObj.fvsDevice" @click="getFvs(jyObj,4)">
                            <img src="../../../assets/images/fse/common/camera_0.png" v-if="jyObj.fvsDevice.deviceStatus == 0" class="disabled" />
                            <img src="../../../assets/images/fse/common/camera_1.png" v-if="jyObj.fvsDevice.deviceStatus == 1" />
                        </div>
                    </div>
                    <div class="right">
                        <el-radio-group v-model="tabValue" style="margin-bottom:10px;">
                            <el-radio-button label="1">基础数据</el-radio-button>
                            <el-radio-button label="2">预警状态</el-radio-button>
                            <el-radio-button label="3">动作开关</el-radio-button>
                            <el-radio-button label="4">行程开关</el-radio-button>
                            <el-radio-button label="5" v-if="!!collisionFlag">防碰撞</el-radio-button>
                        </el-radio-group>
                        <div class="timeBox">数据更新时间：{{list.time?list.time:'--'}}</div>
                        <div class="tab_1" v-if="tabValue == 1">
                            <ul class="list">
                                <li class="item" v-for="(item,i) in basicsList">
                                    <div>
                                        <img class="img" :src="item.img" />
                                    </div>
                                    <div>{{item.name}}</div>
                                    <div><i>{{item.num}}</i>{{item.unit}}</div>
                                    <div class="last" v-if="item.name != '工况设置'" @click="checkLog(item)">历史数据</div>
                                </li>
                            </ul>
                        </div>
                        <div class="tab_2" v-if="tabValue == 2">
                            <ul class="list">
                                <template v-for="(item,i) in alarmStateList">
                                    <li class="item" v-if="!!collisionFlag&&item.code==='probeDistanceWarn'">
                                        <div>{{item.name}}</div>
                                        <div>
                                            <img class="img" :src="item.state == 0?icon1:icon1_hover" />
                                        </div>
                                    </li>
                                    <li class="item" v-if="item.code!=='probeDistanceWarn'">
                                        <div>{{item.name}}</div>
                                        <div>
                                            <img class="img" :src="item.state == 0?icon1:icon1_hover" />
                                        </div>
                                    </li>
                                </template>
                            </ul>
                        </div>
                        <div class="tab_2" v-if="tabValue == 3">
                            <ul class="list">
                                <li class="item" v-for="(item,i) in actionSwitchList">
                                    <div>{{item.name}}</div>
                                    <div>
                                        <img class="img" :src="item.state == 1?icon2:icon2_hover" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tab_2" v-if="tabValue == 4">
                            <ul class="list">
                                <li class="item" v-for="(item,i) in travelSwitchList">
                                    <div>{{item.name}}</div>
                                    <div>
                                        <img class="img" :src="item.state == 1?icon2:icon2_hover" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tab_1" v-if="tabValue == 5">
                            <ul class="list">
                                <li class="item" v-for="(item,i) in probeDistanceList">
                                    <div style="width: 0;height: 0;;background-color:transparent;"></div>
                                    <div style="width: 1.5rem;">探头感应距离{{i+1}}</div>
                                    <div><i>{{item}}</i>米</div>
                                    <div class="last"  @click="checkLog(item)">历史数据</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="crawler_box nodata" v-if="!dataFlag"> 暂无履带吊设备,请在履带吊设备页,添加并绑定履带吊设备</div>
        </div>

        <Modal v-model="Model" title="历史数据" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="log">
                <div class="list">
                    <div class="item">
                        <span>数据类型:</span>
                        <span>{{ logType }}</span>
                    </div>
                    <div class="item">
                        <span>选择日期:</span>
                        <DatePicker type="date" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd" v-model="dateTime" :clearable="false"></DatePicker>
                        <el-button type="primary" @click="searchLog" style="margin-left:20px;" size="small">搜索</el-button>
                    </div>
                </div>
                <div class="eachart" >
                    <div class="canvas_none" v-if="dataList.length==0">
                        <img src="./../../../assets/images/common/canvas_none1.png" />
                    </div>
                    <div id="line" :style="{ height: '400px', width: '800px' }"></div>
                </div>
            </div>
        </Modal>

        <Modal v-model="videomodal"  :mask-closable="false" width="700px" :footer-hide="true">
            <div slot="header" style="display:flex;justify-content: space-between;">
                <span >视频直播</span>
            </div>
            <div class="chart video-play" v-show="videoFlag"></div>
            <div class="chart" v-show="!videoFlag">
                <video
                    ref="videoElement"
                    id="videoElement"
                    controls
                    autoplay
                    muted
                    width="668"
                    height="400"
                    style="object-fit: fill;outline:none;"
                ></video>
            </div>
        </Modal>

    </div>
</template>

<script>
import "@/sever/ezuikit.js";
import {
    getcrawlerList,//获取履带吊
    getcrawlerlatest,//获取履带吊最新数据
    getcrawlerlog, getCrawlerFvsList,//获取履带吊历史数据
} from "@/api/crawler";
import {format, formatDate, randomRgbColor} from "@/sever/utils";
import {getFvsToken, getStreamUrl} from "@/api/api";
import hlsjs from "hls.js";
export default {
    data(){
        return{
            keyword:'',
            tabActiveName:'',
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            icon1:require("./../../../assets/images/fse/crawler/close.png"),
            icon1_hover:require("./../../../assets/images/fse/crawler/close_hover.png"),
            icon2:require("./../../../assets/images/fse/crawler/close2.png"),
            icon2_hover:require("./../../../assets/images/fse/crawler/close2_hover.png"),
            deptId: "",
            crawlerId:'',//设备id
            crawlerlist:[],//设备列表
            tabValue:'1',
            list:{},//数据列表
            basicsList:[
                {
                    code:'conditions',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/1.png"),
                    name:'工况设置',
                    unit:"",
                },
                {
                    code:'mainHookWeight',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/2.png"),
                    name:'主钩吊重',
                    unit:"t",
                },
                {
                    code:'mainHookHeight',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/3.png"),
                    name:'主钩高度',
                    unit:"m",
                },
                {
                    code:'viceHookWeight',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/4.png"),
                    name:'副钩吊重',
                    unit:"t",
                },
                {
                    code:'viceHookHeight',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/5.png"),
                    name:'副钩高度',
                    unit:"m",
                },
                {
                    code:'windSpeed',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/6.png"),
                    name:'风速',
                    unit:"m/s",
                },
                {
                    code:'levelness',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/7.png"),
                    name:'水平度',
                    unit:"°",
                },
                {
                    code:'turnAngle',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/8.png"),
                    name:'回转角度',
                    unit:"°",
                },
                {
                    code:'turnSpeed',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/9.png"),
                    name:'回转速度',
                    unit:"°/s",
                },
                {
                    code:'range',
                    num:'',
                    img:require("./../../../assets/images/fse/crawler/10.png"),
                    name:'幅度',
                    unit:"m",
                },
                {
                    num:'',
                    code:'dipAngle',
                    img:require("./../../../assets/images/fse/crawler/1.png"),
                    name:'俯仰角',
                    unit:"°",
                },
                {
                    num:'',
                    code:'mainHookMoment',
                    img:require("./../../../assets/images/fse/crawler/1.png"),
                    name:'主钩力矩',
                    unit:"吨米",
                },
                {
                    num:'',
                    code:'viceHookMoment',
                    img:require("./../../../assets/images/fse/crawler/1.png"),
                    name:'副钩力矩',
                    unit:"吨米",
                },
            ],//基础数据列表
            alarmStateList:[
                {
                    code:'turnWarn',
                    state:'',
                    name:'回转报警',
                },
                {
                    code:'mainHookWeightWarn',
                    state:'',
                    name:'主钩高度报警',
                },
                {
                    code:'mainHookHeightWarn',
                    state:'',
                    name:'主钩重量报警',
                },
                {
                    code:'viceHookHeightWarn',
                    state:'',
                    name:'副钩高度报警',
                },
                {
                    code:'viceHookWeightWarn',
                    state:'',
                    name:'副钩重量报警',
                },
                {
                    code:'dipAngleWarn',
                    state:'',
                    name:'dipAngleWarn',
                },
                {
                    code:'windSpeedWarn',
                    state:'',
                    name:'风速报警',
                },
                {
                    code:'abnormalOpWarn',
                    state:'',
                    name:'不正常操作报警',
                },
                {
                    code:'probeDistanceWarn',
                    state:'',
                    name:'防撞探头报警',
                },
            ],//预警状态列表
            actionSwitchList:[
                {
                    code:'turnLeft',
                    state:'',
                    name:'回转左转',
                },
                {
                    code:'turnRight',
                    state:'',
                    name:'回转右转',
                },
                {
                    code:'mainHookUp',
                    state:'',
                    name:'主钩上升',
                },
                {
                    code:'mainHookDown',
                    state:'',
                    name:'主钩下降',
                },
                {
                    code:'viceHookUp',
                    state:'',
                    name:'副钩上升',
                },
                {
                    code:'viceHookDown',
                    state:'',
                    name:'副钩下降',
                },
                {
                    code:'mainHookBrake',
                    state:'',
                    name:'主钩抱闸状态',
                },
                {
                    code:'viceHookBrake',
                    state:'',
                    name:'副钩抱闸状态',
                },
            ],//动作开关列表
            travelSwitchList:[
                {
                    code:'dipAngleLimit',
                    state:0,
                    name:'防后倾限位',
                },
                {
                    code:'doorLimit',
                    state:1,
                    name:'门限位',
                },
                {
                    code:'mainHookHeightUpperLimit',
                    state:0,
                    name:'主钩高度上限位',
                },
                {
                    code:'mainHookHeightLowerLimit',
                    state:0,
                    name:'主钩高度下限位',
                },
                {
                    code:'viceHookHeightUpperLimit',
                    state:1,
                    name:'副钩高度上限位',
                },
                {
                    code:'viceHookHeightLowerLimit',
                    state:0,
                    name:'副钩高度下限位',
                },
            ],//行程开关列表
            Model:false,//历史数据弹框
            dateTime:format(new Date(), "YYYY-MM-DD"),
            logType:'',
            logUnit:'',
            timeList: [],
            dataList:[],
            typeCode:'',
            msgName:'',
            dbObj:{},
            qsObj:{},
            hsObj:{},
            jyObj:{},
            videomodal:false,
            videoFlag: true,
            dataFlag:false,
            collisionFlag:false,
            probeDistanceList:[],//防碰撞
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    },
    methods: {
        cancelVideo() {
            if (this.hlsjs) {
                this.$refs.videoElement.pause();
                this.hlsjs.destroy();
                this.hlsjs = null;
            }
        },
        getrecordPlay(url,index) {
            this.htmlVideo =
                "<div id='myVideo" + index + "' /> </div>";
            $(".video-play").html(this.htmlVideo);
            this.recordPlay = new EZUIPlayer({
                id: "myVideo" + index,
                url: url,
                autoplay: true,
                accessToken:this.ezvizToken,
                decoderPath: "./../../../static",
                width: 668,
                height: 400
            });
        },
        //play for flv
        showVideo(url) {
            let video = this.$refs.videoElement; //定义挂载点
            if (hlsjs.isSupported()) {
                this.hlsjs = new hlsjs();
                this.hlsjs.loadSource(url);
                this.hlsjs.attachMedia(video);
                this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                    this.video.play();
                });
                this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                    // console.log(event, data);
                    // 监听出错事件
                });
            } else {
                this.$message.error("不支持的格式");
                return;
            }
        },
        flv_close() {
            this.videomodal = false;
            if(!this.videoFlag){
                this.$refs.videoElement.setAttribute('src','')
                this.cancelVideo();
            }else if(this.videoFlag){
                this.recordPlay.stop();
            }
        },
        getToken(platform){
            let params ={
                deptId:this.deptId,
                platform:platform
            }
            getFvsToken(params).then(res=>{
                if(res.code == 200) {
                    this.ezvizToken = res.data.token || '';
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getFvs(item, index) {
            console.log(item)
            if(item.fvsDevice.deviceStatus == 1){
                $(".video-play").empty();
                this.videomodal = true;
                if(item.fvsDevice.platform == "0") {
                    this.getToken(item.fvsDevice.platform);
                }
                let params = {
                    id: item.fvsDevice.id
                };
                getStreamUrl(params)
                    .then(res => {
                        if (res.code == 200) {
                            let url;
                            if (item.fvsDevice.playMode == 2) {
                                this.videoFlag = true;
                                url = res.data.ezopenHd;
                                this.getrecordPlay(url,index)
                            } else {
                                this.videoFlag = false;
                                if(res.data.playUrl){
                                    url = res.data.playUrl;
                                    this.$refs.videoElement.setAttribute('src',url)
                                }else{
                                    url = res.data.hls;
                                    this.showVideo(url);
                                }
                            }
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        getJSON(data){
            return JSON.stringify(data) == '{}';
        },
        getFvsList(){
            this.dbObj ={};
            this.qsObj ={};
            this.hsObj ={};
            this.jyObj ={};
            let params = {
                crawlerId: this.crawlerId
            };
            getCrawlerFvsList(params).then(res=>{
                if(res.code == 200) {
                    if(res.data.list.length > 0) {
                        res.data.list.forEach(i=>{
                            if(i.part == 1) {
                                this.dbObj = i;
                            } else if (i.part == 2) {
                                this.qsObj = i;
                            } else if (i.part == 3) {
                                this.hsObj = i;
                            } else if (i.part == 4) {
                                this.jyObj = i;
                            }
                        })
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //切换设备
        setTabClick(index){
            this.crawlerId = this.crawlerlist[index].crawlerId;
            this.collisionFlag = this.crawlerlist[index].collisionFlag;
            this.getcrawlerlatest(this.crawlerId);
            this.getFvsList(this.crawlerId);
        },
        //获取履带吊设备
        getAllList(){
            let params ={
                deptId:this.deptId,
                keyword:this.keyword,
                bindFlag:1,
            }
            getcrawlerList(params).then(res =>{
                if (res.code == 200){
                    this.crawlerlist = res.data.list
                    if (res.data.list.length > 0){
                        this.dataFlag = true
                        this.crawlerId = res.data.list[0].crawlerId;
                        this.collisionFlag = res.data.list[0].collisionFlag;
                        this.getcrawlerlatest(this.crawlerId);
                        this.getFvsList();
                    }else {
                        this.dataFlag = false
                    }
                }else {
                    this.$Message.warning(res.msg);
                }
            }) .catch(error => {
                console.log(error);
            });
        },
        //获取最新履带吊数据
        getcrawlerlatest(id){
            let params ={
                crawlerId:id
            }
            getcrawlerlatest(params).then(res =>{
                if (res.code == 200){
                    this.list = res.data
                    this.crawlerId = res.data.crawlerId;
                    this.probeDistanceList = res.data.probeDistanceList;
                    var arr = []
                    for (let i in res.data) {
                        let o = {}
                        o[i] = res.data[i];
                        o['code'] = i;
                        o['name'] = res.data[i];
                        arr.push(o)
                    }
                    this.basicsList.forEach(e =>{
                        var value = e
                        for (var j = 0; j < arr.length; j++) {
                            if (value.code == arr[j].code){
                                value.num = arr[j].name
                                if (value.code == 'conditions'){
                                    if (value.num == 0){
                                        value.num = '主臂工况'
                                    }
                                    if (value.num == 100){
                                        value.num = '塔况'
                                    }
                                    if (value.num == 200){
                                        value.num = '混合臂'
                                    }
                                    if (value.num == 300){
                                        value.num = '超起'
                                    }
                                    if (value.num == 400){
                                        value.num = '综合'
                                    }
                                }
                            }
                        }
                    })
                   this.alarmStateList.forEach(e =>{
                       var data = e
                       for (var s = 0; s < arr.length; s++) {
                           if (data.code == arr[s].code){
                               data.state = arr[s].name
                           }
                       }
                   })
                    this.actionSwitchList.forEach(e =>{
                        var data = e
                        for (var i = 0; i < arr.length; i++) {
                            if (data.code == arr[i].code){
                                data.state = arr[i].name
                            }
                        }
                    })
                    this.travelSwitchList.forEach(e =>{
                        var data = e
                        for (var h = 0; h < arr.length; h++) {
                            if (data.code == arr[h].code){
                                data.state = arr[h].name
                            }
                        }
                    })
                }else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        //点击查看历史数据
        checkLog(item){
            this.logType = item.name || '防碰撞';
            this.logUnit = item.unit || '米';
            this.typeCode = item.code || 'probeDistances';
            this.Model = true
            this.getcrawlerlog();
        },
        searchLog(){//搜索历史数据
            this.getcrawlerlog();
        },
        //获取履带吊历史数据
        getcrawlerlog(){
            this.timeList = [] //时间数组
            this.dataList = [] //历史数据数组
            let dataList = [];
            let probeDistanceList = [];//防碰撞
            let params ={
                crawlerId:this.crawlerId,
                field:this.typeCode,
                date:format(this.dateTime, "YYYY-MM-DD"),
            }
            getcrawlerlog(params).then(res =>{
                if (res.code == 200){
                    res.data.list.forEach(i => {
                        if (this.typeCode == 'mainHookWeight'){ //主钩吊重
                            dataList.push(i.mainHookWeight)
                        }else if (this.typeCode == 'mainHookHeight'){ //主钩高度
                            dataList.push(i.mainHookHeight)
                        }else if (this.typeCode == 'viceHookWeight'){ //副钩吊重
                            dataList.push(i.viceHookWeight)
                        }else if (this.typeCode == 'viceHookHeight'){ //副钩高度
                            dataList.push(i.viceHookHeight)
                        }else if (this.typeCode == 'windSpeed'){ //风速
                            dataList.push(i.windSpeed)
                        }else if (this.typeCode == 'levelness'){ //水平度
                            dataList.push(i.levelness)
                        }else if (this.typeCode == 'turnAngle'){ //回转角度
                            dataList.push(i.turnAngle)
                        }else if (this.typeCode == 'turnSpeed'){ //回转速度
                            dataList.push(i.turnSpeed)
                        }else if (this.typeCode == 'range'){ //回转幅度
                            dataList.push(i.range)
                        }else if (this.typeCode == 'dipAngle'){ //俯仰角
                            dataList.push(i.dipAngle)
                        }else if (this.typeCode == 'mainHookMoment'){ //主钩力矩
                            dataList.push(i.mainHookMoment)
                        }else if (this.typeCode == 'viceHookMoment'){ //副钩力矩
                            dataList.push(i.viceHookMoment)
                        }else if (this.typeCode == 'probeDistances'){ //防碰撞
                            probeDistanceList.push(i.probeDistanceList);
                        }
                        this.timeList.push(i.time);
                     });
                    if(this.typeCode == 'probeDistanceList'){
                        if(probeDistanceList.length > 0){
                            let probeDistanceArr = probeDistanceList[0];
                            let dataList = [];
                            for (let i = 0; i < probeDistanceArr.length; i++) {
                                let color = randomRgbColor();
                                let obj = {
                                    name: `探头感应距离${i+1}`,
                                    type: "line",
                                    smooth: true ,
                                    data: probeDistanceList.map(x => x[i]),
                                    itemStyle: {
                                        //上方显示数值
                                        normal: {
                                            lineStyle: {
                                                color: color //折线的颜色
                                            },
                                            color: color
                                        }
                                    }
                                };
                                dataList[i] = obj;
                            }
                            this.dataList = dataList;
                        }
                    }else{
                        let obj = {
                            name: this.logType,
                            type: "line",
                            smooth: true ,
                            data: dataList,
                            itemStyle: {
                                //上方显示数值
                                normal: {
                                    // label: {
                                    //   show: true, //开启显示
                                    //   position: "top", //在上方显示
                                    //   textStyle: {
                                    //     //数值样式
                                    //     color: "#02C0C0",
                                    //     fontSize: 16
                                    //   }
                                    // },
                                    lineStyle: {
                                        color: "#1891ff" //折线的颜色
                                    },
                                    color: "#2BB6FF"
                                }
                            }
                        }
                        this.dataList = [obj]
                    }
                     this.darwLine();
                }else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        darwLine() {
            let line = this.$echarts.init(document.getElementById("line"));
            line.setOption({
                color: ["rgb(255, 179, 94)"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                    // formatter: "{b0}<br/>{a0}: {c0}"
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    data: this.timeList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                },
                dataZoom: [
                    {
                        startValue: this.timeList.length > 0 ? this.timeList[0] : ''
                    },
                    {
                        type: 'inside'
                    }
                ],
                yAxis: {
                    show: true,
                    name: this.logType + '(' + this.logUnit + ')',
                    splitLine: {
                        //去除网格线
                        show: false
                    },
                },
                series:this.dataList
            });
        },
    }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
ul{
    list-style: none;
}
ul::-webkit-scrollbar {
    width: 6px;
}
/*滚动槽*/
ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
/* 滚动条滑块 */
ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
ul::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}
i{
    font-style: normal;
    font-weight: 400;
    font-size:pxToRem(26);
    margin-right: 5px;
}
.container{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;

    .monitor {
        flex: 1;
        height: 100%;
        overflow: hidden;
        .nodata {
            background-color: #fff !important;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin: 0 auto;
            border-radius: 10px;
        }

        .crawler_box{
            width: 100%;
            height: 100%;
            .header_box {
                background: #FFFFFF;
                border-radius: 4px;
                /deep/ .ivu-tabs-bar{
                    border-bottom: none!important;
                    margin-bottom: 0px!important;
                    font-size: 14px;
                }
            }
            .bottom-box{
                width: 100%;
                height: calc(100% - 45px);
                display: flex;
                margin-top: 10px;
                .left{
                    position: relative;
                    width: 60%;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    .img{

                        background-image: url(../../../assets/images/fse/crawler/crawler.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: relative;
                        width: 90%;
                        height: 90%;
                    }
                    .db{
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        top: 4%;
                        right: 17.5%;
                        z-index: 99;
                        img{
                            display: block;
                            width: 30px;
                            height: 30px;
                            cursor: pointer;
                        }
                    }
                    .jy{
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        bottom: 27%;
                        left: 15.5%;
                        z-index: 99;
                        img{
                            display: block;
                            width: 30px;
                            height: 30px;
                            cursor: pointer;
                        }
                    }
                    .qs{
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        bottom: 24%;
                        left: 5.5%;
                        z-index: 99;
                        img{
                            display: block;
                            width: 30px;
                            height: 30px;
                            cursor: pointer;
                        }
                    }
                    .hs{
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        bottom: 16%;
                        left: 3.5%;
                        z-index: 99;
                        img{
                            display: block;
                            width: 30px;
                            height: 30px;
                            cursor: pointer;
                        }
                    }
                }
                .right{
                    margin-left: 10px;
                    width: 40%;
                    background: #FFFFFF;
                    border-radius: 4px;
                    padding:pxToRem(16) pxToRem(24);
                    box-sizing: border-box;
                    // /deep/ .el-radio-button__inner{
                    //     border: 1px solid #1891ff;
                    //     color:#1891ff;
                    // }
                    // /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                    //     background-color: #1891ff;
                    //     color: #FFFFFF;
                    // }
                    .timeBox{
                        font-size: 12px;
                        color: #B5B5B5;
                    }
                    .tab_1{
                        .list{
                            height:pxToRem(650);
                            overflow: auto;
                            .item{
                                height: 52px;
                                width: 100%;
                                background: #F0F6FE;
                                border-radius: 2px;
                                font-size: 16px;
                                color: var(--themeColor);
                                font-family: Source Han Sans CN;
                                margin-top: 25px;
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                div:first-child{
                                    width: 58px;
                                    height: 52px;
                                    background: #7DB9F6;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    img{
                                        width: 26px;
                                        height: 26px;
                                    }
                                }
                                div:nth-child(2){
                                    width:pxToRem(100);
                                    margin-left: pxToRem(22);
                                }
                                div:nth-child(3){
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-end;
                                }
                                .last{
                                    width: pxToRem(146);
                                    text-align: center;
                                    border-left: 2px solid rgba(45, 140, 240, 0.3);
                                    margin-left: 13px;
                                    height: 39px;
                                    line-height: 39px;
                                }
                            }
                        }
                    }
                    .tab_2{
                        .list {
                            height: pxToRem(650);
                            overflow: auto;
                            .item {
                                height: 52px;
                                width: 100%;
                                display: flex;
                                background: #F0F6FE;
                                border-radius: 2px;
                                font-size: 16px;
                                color: var(--themeColor);
                                font-family: Source Han Sans CN;
                                margin-top: 25px;
                                align-items: center;
                                padding: 0 pxToRem(20);
                                div:first-child{
                                    flex: 1;
                                }
                                div:last-child{
                                    img{
                                        width: 26px;
                                        height: 26px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

    }
}
.log{
    .list{
        .item{
            font-size: 14px;
            font-family: Source Han Sans CN;
            margin-bottom: 30px;
            span:first-child{
                color: #333333;
            }
            span:nth-child(2){
                color: #555555;
            }
        }
    }
}
.eachart{
    width: 100%;
    height: 500px;
    position: relative;
    .canvas_none{
        position: absolute;
        top: 16%;
        left: 3%;
        // transform: translateX(-50%);
        width: 80%;
        height: 220px;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
</style >
